﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="/style/rightdirectory.css" rel="stylesheet" />
    <script src="/script/config.js"></script>
</head>

<body>
    <h5>菜单操作</h5>
    <div class="form-body">
        <div class="form-horizontal  hide" id="form">

        </div>
    </div>
</body>
</html>
<script type="text/html" id="tp-form">
    <div class="form-group">
        <label class="col-sm-2">菜单名称</label>
        <div class="col-md-6 col-sm-10">
            <input type="text" class="form-control" data-form="MenuName" placeholder="MenuName" value="{{MenuName}}">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2">pid</label>
        <div class="col-md-6 col-sm-10">
            <input type="text" class="form-control" id="PId" data-form="PId" placeholder="一级导航为0，二级导航为父级id" value="{{PId}}">
            
            <label for="PId" class="input-control-icon-right" style="left: 230px !important;cursor:pointer;" onclick="showMenuList()"><i class="icon icon-plus-sign"></i></label>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2">菜单链接</label>
        <div class="col-md-6 col-sm-10">
            <input type="text" class="form-control" data-form="Url" placeholder="导航链接地址，一级为空" value="{{Url}}">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2">菜单图标</label>
        <div class="col-md-6 col-sm-10">
            <input type="text" class="form-control" id="Icon" data-form="Icon" placeholder="格式为如：icon icon-diamond只改diamond" value="{{Icon}}">
            <label for="Icon" class="input-control-icon-right" style="left: 230px !important;cursor:pointer;" onclick="showIconList()"><i class="icon icon-plus-sign"></i></label>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2">菜单排序号</label>
        <div class="col-md-6 col-sm-10">
            <input type="text" class="form-control" data-form="SortId" placeholder="数字越小越前" value="{{SortId}}">
        </div>
    </div>
    {{if pageid>1}}
    <div class="form-group">
        <label class="col-sm-2">菜单id</label>
        <div class="col-md-6 col-sm-10">
            <input type="text" class="form-control" data-form="Id" placeholder="id" value="{{Id}}">
        </div>
    </div>
    {{/if}}


    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" id="btn-submit" class="btn btn-primary">保存</button>
            <button type="button" class="btn" onclick="window.history.go(-1)">退出</button>
        </div>
    </div>
</script>
<link href="/script/valid/css/tr.css" rel="stylesheet" /><!--判断如：PlatformName格式-->
<script src="/script/valid/form-valid.js?v=2018"></script>
<script>
    $(function () {
        var id = QueryPageUrlString("v");//判断是否是编辑进来的
        var formValidEvent;
        var formValidInit = function () {
            var formValidData = [
                {
                    key: "MenuName",
                    datatype: "*",
                    nullmsg: "不能为空哦",
                    errormsg: "不能为空哦"
                },

                {
                    key: "SortId",
                    datatype: "n",
                    nullmsg: "不能为空哦",
                    errormsg: "请正确输入！"
                },
                {
                    key: "PId",
                    datatype: "n",
                    nullmsg: "不能为空哦",
                    errormsg: "请正确输入！"
                },
            ];
            formValidEvent = $(".form-body").formValid(formValidData);
        }
        var inintData = {
            MenuName: "",
            Url: "",
            PId: "",
            SortId: "",
            pageid: id
        };

        if (id > 0) { //存在值的情况
            $.http.json("menu/find", {   //查询
                id: id
            }, {
                    pass: function (data) {
                        data.pageid = id;
                        $("#form").templateRender({ el: "tp-form", data: data });//渲染模板，要先渲染才能获值
                        formValidInit();
                    },
                    error: function (d) {
                        console.log(d);
                    }
                });
        } else {
            $("#form").templateRender({ el: "tp-form", data: inintData });//渲染模板，要先渲染才能获值
            formValidInit();
        }

        $("#form").on("click", "#btn-submit", function () { //保存按钮有添加和编辑
            if (!formValidEvent.check()) { return; }
            var apiUrl = "menu/insert";
            if (id > 0) {
                apiUrl = "menu/upd";
            }
            $("#form").ajaxFormSubmit(apiUrl, {
                pass: function (d) {
                    $.msgSucceed(d.Errmsg);
                    return
                },
                error: function (d) {
                    $.msgFall(d.Errmsg);
                }
            }, { addData: { Id: id, } });
            return
        });
    });
    var index = 0;

    function showIconList() {
        var iconHtmlStr = "";
        $.each($_icon, function(i, item) {
            iconHtmlStr += '<div class="col-md-3 col-sm-4 col-lg-3"><div class="card" style="cursor: pointer;" data-class="' + item + '"><i style="padding: 2px 2px;" class="' + item + '"></i>' + i+'</div></div>';
        });
        index=$.layrePage({  //弹出
            area: ["50%", "800px"],
            title: "图标列表",
            offset: "6px",
            content: '<div class="cards" style="padding:10px  !important;">' + iconHtmlStr+'</div>',
            success: function (layero, index) {
                $(".cards .card").click(function() {
                    $("#Icon").val($(this).attr("data-class"));
                });
            }
        });
    }

    function showMenuList() {
        var Page = { Index: 1, Size: 80 };
        var data = {Page}
        var da = "";
        $.http.json("menu/list",data,{ 
            pass: function (data) {
                var menuHtmlStr = "";
                $.each(data.Data, function (i, item) {
                    if (item.PId==0) {
                        menuHtmlStr += '<li><a data-id="' + item.Id +'" href="#">' + item.MenuName + '</a>' + eachChildren(data.Data, item.Id)+'</li>';
                    }
                });
                index=$.layrePage({  //弹出
                    area: ["20%", "800px"],
                    title: "菜单列表",
                    offset: "6px",
                    content: '<ul class="tree tree-lines" data-ride="tree" style="margin:10px;">' +
                        menuHtmlStr +
                        '</ul>',
                    success: function (layero, index) {
                        $('.tree').tree({ "initialState": "normal" });
                        $(".tree a").bind("click", chooseMenuPId);
                    }
                });
            },
            error: function(d) {

            }
        });
    }

    function chooseMenuPId() {
        $("#PId").val($(this).attr("data-id"));
        $.layreClose(index);
    }

    function eachChildren(data, id) {

        var childrenHtmlStr = "<ul>";
        $.each(data, function(i, item) {
            if (item.PId == id) {
                childrenHtmlStr += '<li><a data-id="' + item.Id +'" href="#">' + item.MenuName + '</a>' + eachChildren(data, item.Id)+'</li>';
            }
        });
        childrenHtmlStr += "</ul>";
        if (childrenHtmlStr == "<ul></ul>") {
            childrenHtmlStr = "";
        }
        return childrenHtmlStr;
    }
</script>
